<template>


	<view style="height: 100vh;" class="  bg-white">

		<!-- 		<view class="cu-list menu-avatar">
			<view class="cu-item">

				<view class="cu-avatar round lg" :style="{backgroundImage:`url(${imgUrl})`}">
					<view class="cu-tag badge"
						:class="user_gender==2?'cuIcon-male bg-pink':user_gender==1?'cuIcon-female bg-blue':'cuIcon-question bg-gray'">
					</view>
				</view>
				<view class="content flex-sub">
					<view>111</view>
					<view class="text-gray text-sm flex justify-between">
						<view>111</view>
					</view>
				</view>
			</view>

		</view> -->

		<view class="wei-flex padding-lg ">
			<view class="cu-avatar round xl" :style="{backgroundImage:`url(${userInfo.avatarUrl})`}">
				<view class="cu-tag badge"
					:class="userInfo.user_gender==2?'cuIcon-male bg-pink':userInfo.user_gender==1?'cuIcon-female bg-blue':'cuIcon-question bg-gray'">
				</view>
				<view>
					<text class="text-sm ">{{userInfo.user_name}}</text>
				</view>
			</view>

			<text @tap="editUserInfo" v-if="!editShow" class="cuIcon-writefill text-cyan text-lg"> &nbsp;修改</text>
			<text @tap="editUserInfo" v-else class="cuIcon-roundclosefill text-grey text-lg"> &nbsp;取消</text>


		</view>

		<form v-if="editShow">
			<view class="cu-form-group ">
				<view class="title">昵称</view>
				<input placeholder="请输入昵称" v-model="user_name" name="input"></input>
			</view>
			<view class="cu-form-group title">
				<view>选择性别({{switchC?'男':'女'}})</view>
				<switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''"
					:checked="switchC?true:false"></switch>
			</view>
			<view class="cu-bar bg-white cu-form-group title">
				<view class="action">
					更换头像
				</view>

			</view>
			<view class="padding-left">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" @tap="ViewImage" v-if="imgUrlTemp" :data-url="imgUrlTemp">
						<image :src="imgUrlTemp" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<view class=" padding-lr padding-tb-sm flex flex-direction">
				<button @tap="submitUserInfo()" class="cu-btn block  lg">
					确认修改
				</button>
			</view>

		</form>


		<!-- --------------------------------------- -->

		<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">

			<!-- 	<view class="cu-item" :class="menuArrow?'arrow':''">
				<navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
					<text class="cuIcon-discoverfill text-orange"></text>
					<text class="text-grey">Navigator 跳转</text>
				</navigator>
			</view> -->
			<!-- 	<view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content">
					<text class="cuIcon-emojiflashfill text-pink"></text>
					<text class="text-grey">头像组</text>
				</view>
				<view class="action">
					<view class="cu-avatar-group">
						<view class="cu-avatar round sm"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
						</view>
						<view class="cu-avatar round sm"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);">
						</view>
						<view class="cu-avatar round sm"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);">
						</view>
						<view class="cu-avatar round sm"
							style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);">
						</view>
					</view>
					<text class="text-grey text-sm">4 人</text>
				</view>
			</view> -->
			<!-- <view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content">
					<text class="cuIcon-btn text-green"></text>
					<text class="text-grey">按钮</text>
				</view>
				<view class="action">
					<button class="cu-btn round bg-green shadow">
						<text class="cuIcon-upload"></text> 上传</button>
				</view>
			</view>
			<view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content">
					<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
					<text class="text-grey">标签</text>
				</view>
				<view class="action">
					<view class="cu-tag round bg-orange light">音乐</view>
					<view class="cu-tag round bg-olive light">电影</view>
					<view class="cu-tag round bg-blue light">旅行</view>
				</view>
			</view>
			<view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content">
					<text class="cuIcon-warn text-green"></text>
					<text class="text-grey">文本</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">小目标还没有实现！</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content padding-tb-sm">
					<view>
						<text class="cuIcon-clothesfill text-blue margin-right-xs"></text> 多行Item
					</view>
					<view class="text-gray text-sm">
						<text class="cuIcon-infofill margin-right-xs"></text> 小目标还没有实现！
					</view>
				</view>
				<view class="action">
					<switch class="switch-sex" @change="SwitchSex" :class="skin?'checked':''"
						:checked="skin?true:false"></switch>
				</view>
			</view> -->
			<view class=" padding-lr padding-tb-sm flex flex-direction">
				<button @tap="clearStrorage()" class="cu-btn block  lg">
					清除缓存
				</button>
			</view>
			<view class=" padding-lr padding-tb-sm flex flex-direction">
				<button @tap="reLogin()" class="cu-btn block  lg">
					重新登录
				</button>
			</view>
		</view>

		<!-- ---------------------------------------- -->








	</view>

</template>

<script>
	import {
		update_user_by_pk
	} from "@/common/api.js";
	export default {
		onShow() {
			// console.log(getApp().globalData.userInfo,"getApp().globalData.userInfo.id");
			this.userInfo = getApp().globalData.userInfo


		},
		data() {
			return {
				userInfo: null,
				imgUrlTemp: '',
				switchC: false,

				user_name: '',
				user_gender: 0,
				cuIconList: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '录像'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '图像'
				}, {
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '通知'
				}, {
					cuIcon: 'upstagefill',
					color: 'cyan',
					badge: 0,
					name: '排行榜'
				}, {
					cuIcon: 'clothesfill',
					color: 'blue',
					badge: 0,
					name: '皮肤'
				}, {
					cuIcon: 'discoverfill',
					color: 'purple',
					badge: 0,
					name: '发现'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '帮助'
				}, {
					cuIcon: 'commandfill',
					color: 'purple',
					badge: 0,
					name: '问答'
				}, {
					cuIcon: 'brandfill',
					color: 'mauve',
					badge: 0,
					name: '版权'
				}],
				modalName: null,
				menuBorder: true,
				menuArrow: true,
				menuCard: false,
				skin: true,
				listTouchStart: 0,
				listTouchDirection: null,
				editShow: false
			}
		},

		methods: {

			editUserInfo() {
				this.user_name = this.userInfo.user_name
				this.switchC = this.userInfo.user_gender == 1 ? true : false
				this.editShow = !this.editShow

			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {

						this.imgUrlTemp = res.tempFilePaths[0]

					}

				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgUrlTemp,
					current: 1
				});
			},
			DelImg(e) {
				uni.showModal({

					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '是的',
					success: res => {
						if (res.confirm) {
							this.imgUrlTemp = ''
						}
					}
				})
			},
			SwitchC(e) {
				this.switchC = e.detail.value

				console.log(this.switchC);
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
			MenuBorder(e) {
				this.menuBorder = e.detail.value
			},
			MenuArrow(e) {
				this.menuArrow = e.detail.value
			},
			MenuCard(e) {
				this.menuCard = e.detail.value
			},
			SwitchSex(e) {
				this.skin = e.detail.value
			},
			// 确认提交
			submitUserInfo() {
				console.log(this.imgUrlTemp, this.user_name, this.switchC, "usrInfo---------------");
				let userGender = (this.switchC ? 1 : 2).toString()
				let name = `${userGender}${this.userInfo.id}+${this.user_name}`
				console.log(userGender, name);


				if (this.imgUrlTemp) {
					//上传了头像,走action
					console.log("上传了头像走action");

					// 压缩图片
					uni.compressImage({
						src: this.imgUrlTemp,
						quality: 1,
						success: res => {
							
							uni.compressImage({
								src: res.tempFilePath,
								quality: 1,
								success: ress => {
									console.log(ress.tempFilePath)
									uni.uploadFile({
										url: `${this.$baseUrl}/upload`, //仅为示例，非真实的接口地址
										filePath: ress.tempFilePath,
										name,
										header: {
											"Content-Type": 'application/json; charset=utf-8'
										},
										success: (res) => {
									
									
											// const houzhui = res.data.match(/fileName":"(\S*)","pathSave/)[1]
									
									
											// this.imgUrl = `${this.$baseUrl}/getImg?id=${houzhui}`
											this.userInfo.avatarUrl = ress.tempFilePath
											this.userInfo.user_name = this.user_name
											this.userInfo.user_gender = this.switchC ? '1' : '2'
											this.editShow = false
									
											uni.showToast({
												icon: "success",
												title: "修改成功!"
											})
										},
										fail: (err) => {
											console.log(err, "err");
											uni.showModal({
												content: "修改失败,稍后再试!",
												complete() {
													uni.navigateBack()
												}
											})
										}
									});
								}
							})
						}
					})
					
					



				} else {
					// 没有上传头像走graphql
					console.log("没有上传头像走");
					let variables = {
						"id": this.userInfo.id,
						"_set": {
							"user_name": this.user_name,
							"user_gender": userGender
						}
					}
					update_user_by_pk(variables).then(res => {
						console.log(res);
						if (res.data?.update_user_by_pk) {

							this.userInfo.user_name = this.user_name
							this.userInfo.user_gender = this.switchC ? '1' : '2'
							this.editShow = false

							uni.showToast({
								icon: "success",
								title: "修改成功!"
							})
						} else {
							uni.showModal({
								content: "修改失败,稍后再试!",
								complete() {
									uni.navigateBack()
								}
							})
						}
					}).catch(err => {
						console.log(err);
						uni.showModal({
							content: "修改失败,稍后再试!",
							complete() {
								uni.navigateBack()
							}
						})
					})
				}


			},


			reLogin() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			clearStrorage() {
				try {
					uni.clearStorageSync();
					uni.navigateTo({
						url: "/pages/login/index"
					})
				} catch (e) {
					// error
				}
			}
		}
	}
</script>

<style>
	.wei-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid whitesmoke;
	}
</style>
